<template>
  <div class="page">
    <div class="pageTop">
      <img src="" class="logo" />
    </div>

    <div class="pageBody">
      <div class="inputRow">
        <img src="" />
        <input type="text" placeholder="手机号码" maxlength="11" v-model="phone"/>
        <button class="btnGetCode" v-if="show" @click="getCode">获取验证码</button>
        <button class="btnGetCode btnAgain" v-if="!show" disabled>重新发送{{ times }}s</button>
      </div>

      <div class="inputRow">
        <img src="" />
        <input type="text" placeholder="短信验证码" v-model="send"/>
      </div>

      <mt-button type="primary" class="btnSubmit" @click="submit">登录/注册</mt-button>
      <p class="pageText">未注册的手机号验证后自动创建XXX账户</p>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      times: 60,
      show: true,
      phone: '',
      send: ''
    };
  },
  methods: {
    getCode() {
      this.show = false;
      this.timer = setInterval(() => {
        this.times--;
        if (this.times <= 0) {
          this.show = true;
          this.times = 60;
          clearInterval(this.timer);
        }
      }, 1000);
      //设置请求参数
      var getSend = {
        phone: this.phone,
        target: 'login'
      }
      //获取验证码
      this.$http.post('http://172.16.222.16:3000/sms/send',getSend).then( (res) => {
        let data = res.data;
        //console.log(data);
        if(data.code == 400){
          alert(data.errors[0].msg);
        }else if(data.code == 200){
          alert(data.message);
        }
      })
    },

    //提交
    submit(){
      //1. 验证表单
      const reg = /^1[3,5,7,8]\d{9}$/g;
      if(!reg.test(this.phone)){
        alert('请输入正确的手机号码')
        return false;
      }
      //2. 发送数据并响应
      var loginType = {
        type: 2,
        phone: this.phone,
        validCode: this.send
      }
      //验证登录
      this.$http.post('http://172.16.222.16:3000/account/login',loginType).then( (res) => {
        let data = res.data;
        //console.log(data);
        const token = data.access_token;
        //添加token到cookies
        this.$cookies.set('access_token', token);
        this.$router.push("/member");
      })
    }
  },
};
</script>

<style lang="scss" scoped="scoped">
.pageTop {
  padding: 15px;
  height: 140px;
  background-color: dodgerblue;
  display: flex;
  position: relative;
  justify-items: center;
  justify-content: center;
  align-items: center;
  font-size: 1rem;

  .logo {
    width: 100px;
    height: 44px;
  }
}
.inputRow {
  margin: 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  font-size: 1rem;
  img {
    width: 16px;
    height: 16px;
    margin: 0 10px 0 0;
  }
  input {
    flex: 1;
    min-width: 100px;
    border: none;
    line-height: 34px;
    padding: 0;
    outline: none;
    font-size: 1.2rem;
  }

  .btnGetCode {
    background: none;
    border: none;
    height: 40px;
    padding: 5px 0;
    font-size: 1rem;
    white-space:nowrap;
  }
}

.btnSubmit {
  width: calc(100% - 74px);
  margin: 25px 25px 0;
  box-sizing: content-box;
}

.pageText {
  margin: 0;
  text-align: center;
  font-size: 12px;
  color: DarkGray;
}
</style>